<ng-container *ngIf="actions; else loading">
  <ng-container *ngIf="!actions.isError; else error">
    <ng-container *ngIf="actions.value.length; else empty">
      <table mat-table [dataSource]="actions.value">
        <tr mat-header-row *matHeaderRowDef="actionsColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: actionsColumns;"></tr>
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef>{{ 'Action ID' | translate }}</th>
          <td mat-cell *matCellDef="let action">
            <!-- <a [routerLink]="['/actions',action.blockId,action.transaction,action.seq]" [queryParams]="action.parentId > 0 ? {parentId: action.parentId} : {}">
              <button mat-icon-button *ngIf="action.parentId === 0">
                <mat-icon aria-label="main action">data_usage</mat-icon>
              </button>
              <button mat-icon-button *ngIf="action.parentId > 0" style="margin-left:10px;">
                <mat-icon aria-label="inline action">subdirectory_arrow_right</mat-icon>
              </button>
            </a> -->
            {{action.account_action_seq + 1}}
          </td>
        </ng-container>
        <ng-container matColumnDef="blockId">
          <th mat-header-cell *matHeaderCellDef>{{ 'Block ID' | translate }}</th>
          <td mat-cell *matCellDef="let action">
            <a [routerLink]="['/blocks',action.block_num]">{{action.block_num}}</a>
          </td>
        </ng-container>
        <ng-container matColumnDef="transactionId">
          <th mat-header-cell *matHeaderCellDef>{{ 'Transaction ID' | translate }}</th>
          <td mat-cell *matCellDef="let action">
            <a [routerLink]="['/transactions',action.block_num,action.action_trace.trx_id]">
              <id-64 [id]="action.action_trace.trx_id"></id-64>
            </a>
          </td>
        </ng-container>
        <ng-container matColumnDef="timestamp">
          <th mat-header-cell *matHeaderCellDef>{{ 'Timestamp' | translate }}</th>
          <td mat-cell *matCellDef="let action">
            {{action.block_time | amFromUtc | date:'MMM d, y, h:mm:ss.SSS a'}}
          </td>
        </ng-container>
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef>{{ 'Name' | translate }}</th>
          <td mat-cell *matCellDef="let action">
            {{action.action_trace.act.name}}
          </td>
        </ng-container>
      </table>
      <div style="padding:10px 0;" *ngIf="accountActionSequence > 0">
        <button mat-raised-button color="accent" (click)="onLoadMore.emit(accountActionSequence-1)">Load More</button>
      </div>
    </ng-container>
    <ng-template #empty>
      <p class="mat-body-2" style="margin:10px;">No Actions</p>
    </ng-template>
  </ng-container>
  <ng-template #error>
    <app-error></app-error>
  </ng-template>
</ng-container>
<ng-template #loading>
  <app-spinner></app-spinner>
</ng-template>
